<template>
  <div class="q-pa-md" style="max-width: 350px">
    <t-toggle v-model="expanded" label="Expanded" class="q-mb-md" />

    <t-expansion-item
      v-model="expanded"
      icon="perm_identity"
      label="Account settings"
      caption="John Doe"
    >
      <t-card>
        <t-card-section>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius
          reprehenderit eos corrupti commodi magni quaerat ex numquam, dolorum
          officiis modi facere maiores architecto suscipit iste eveniet
          doloribus ullam aliquid.
        </t-card-section>
      </t-card>
    </t-expansion-item>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        expanded: ref(false),
      };
    },
  };
</script>
